<template>
  <div id="divID">
<!--    背景图-->
  <img src="../assets/mback.png" class="img">

<!--    登录表单-->
    <div class="login_box" style="margin-top: 100px">
    <el-form class="login-container" :model="Form" ref="loginForm"
             :rules="rules" label-position="right" size="medium" style="font-size: 25px">
      <h3 class="login-title" style="font-family: 'Comic Sans MS'">土壤墒情监控系统后台登录</h3>
      <el-form-item prop="username" label="用户名">
        <el-input type="text" v-model="Form.userName" auto-complete="off" placeholder="用户名" clearable></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input type="password" v-model="Form.passWord" auto-complete="off" placeholder="密码" clearable></el-input>
      </el-form-item>
      <el-checkbox class="login-remember" v-model="checked">记住密码</el-checkbox>
      <el-form-item>
        <el-button class="login-button" type="success" @click="submitClick()">登录</el-button>
        <el-button class="login-button" type="primary" @click="registerClick()">注册</el-button>
        <el-button class="login-button" type="primary" @click="$router.push({name: 'UserLogin'})">用户登录</el-button>
      </el-form-item>
    </el-form>
    </div>

<!--    注册表单-->
<!--    <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>-->
    <div>
    <!-- Form -->
    <el-dialog title="新用户" :visible.sync="dialogFormVisible" @close="cancal" >
<!--      <img src="../assets/background.png" id="img">-->
      <el-form :model="Form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="Form.userName" autocomplete="off" clearable></el-input>
        </el-form-item>

          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="Form.passWord" autocomplete="off" clearable></el-input>
          </el-form-item>

            <el-form-item label="确认密码" :label-width="formLabelWidth">
              <el-input v-model="Form.passWord2" autocomplete="off" clearable></el-input>
            </el-form-item>
        </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doRegister">确 定</el-button>
      </div>

    </el-dialog>

    </div>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "login",
  data() {
    var checkUserName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'));
      }
    }
    var checkPassWord = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码不能为空'));
      }
    }
    return {
      rules: {
        userName: [
          {validator: checkUserName, trigger: 'blur'}
        ],
        passWord: [
          {validator: checkPassWord, trigger: 'blur'}
        ]
      },
      Form: {
        userName: "",
        passWord: "",
        passWord2: ""
      },
      dialogFormVisible: false,
      formLabelWidth: '120px',
      checked: false
    };
  },
  methods: {
    submitClick() {
      // 表单验证
      const params={
        userName: this.Form.userName,
        passWord: this.Form.passWord
      }
      axios.post(`/api/admin/doLogin`,params)
        .then(({data}) => {
          if (data.message == '登录成功')
          {
            this.$message({
              message: data.message,
              type: "success"
            })
            this.$router.push({name: 'QMain'})
          }
          else {
            this.$message({
              message: data.message,
              type: "error"
            })
          }
      })
        .catch((e) => {
          console.log(e)
        })

      },
    registerClick(){
      this.dialogFormVisible=true
    },
    doRegister(){
      const params={
        userName: this.Form.userName,
        passWord: this.Form.passWord
      }
      axios.post(`/api/admin/doRegister`,params)
        .then(({data}) => {
          if (data.message == '注册成功')
          {
            this.$message({
              message: data.message,
              type: "success"
            })
            this.dialogFormVisible=false
          }
          else {
            this.$message({
              message: data.message,
              type: "error"
            })
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },
    cancal(){
      this.Form.userName='',
      this.Form.passWord='',
      this.Form.passWord2=''
    }
    }
}
</script>

<style>
.img{
  position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  min-width: 1000px;
  z-index:-10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}
.login_box{
  width: 600px;
  height: 100%;
  border-radius: 3px;
  position: absolute;
  /*background: bisque;*/
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)
}
/*el-textarea__inner,.el-input__inner{*/
/*  background: transparent;*/
/*}*/

</style>
